<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框练习</title>
		<link rel="stylesheet" href="css/练习1.css" />
		<!-- 1.画圆形
		     2.画正三角形
		思路：1.   hetm   div元素
		           css    倒角，必须有边框
		思路2.     html    div元素 #triangle
		           css     斜边
				           不设置宽高
						   左边框：50像素实线红色  transparent
						   右边框：50像素实线黄色  transparent
						   下边框：50像素实线蓝色  透明度.3
						   -->
	<style>
		/*1.画圆*/
		div#circle{
			width: 300px;
			height: 300px;
			border: 1px solid red;
			border-radius: 50%;
			/* 边框阴影属性  box-shadow:属性*/
			box-shadow: 5px 5px 20px 9px skyblue inset;
			
		}
		/* 2.正三角形 */
		div#triangle{
			width: 0;
			/* border-left: 50px solid transparent;
			border-right: 50px solid transparent;
			border-bottom: 50px solid rgba(0,0,255,.3); */
			/* 两行 全部设置透明色 上面的三角形设置颜色*/
			border: 50px solid transparent;
			border-left-color: rgba(0,0,255,.3);
		}
		input{
			outline: 1px solid red;
			 outline: 0; /* 去掉边框效果，通配选择器中 */
			 
		}
	</style>
	</head>
	<body>
		<div id="circle"></div>
		<div id="triangle"></div>
	</body>
</html>